import React, { useEffect, useState } from 'react';
import { Resizable } from 'react-resizable';
import { Button } from 'antd';
import { LeftOutlined, FolderOpenOutlined } from '@ant-design/icons';
import FolderSidebar from '@/components/FolderSidebar';
import './index.less';

const LeftResizable: any = Resizable

interface HandleProps {
    handleAxis: string;
    [key: string]: any;
}

const ResizeHandle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
    const { handleAxis, ...restProps } = props;
    return <div ref={ref} className={`left-sidebar-resize-handle handle-${handleAxis}`} {...restProps} />;
});

export default function LeftSidebar() {
    const [width, setWidth] = useState(300);
    const [isExpanded, setIsExpanded] = useState(true);

    useEffect(() => {
        const leftSideWidth = window.localStorage.getItem('leftSideWidth')
        if (leftSideWidth) {
            setWidth(parseFloat(leftSideWidth))
        }
    }, [])

    return (
        <LeftResizable
            width={isExpanded ? width : 32}
            height={window.innerHeight}
            onResize={(e: any, { size }: any) => {
                setWidth(size.width);
            }}
            onResizeStop={(e: any, { size }: any) => {
                window.localStorage.setItem('leftSideWidth', String(size.width))
            }}
            handle={isExpanded ? <ResizeHandle handleAxis="right" /> : <></>}
            axis="x"
            minConstraints={[260, 0]}
            maxConstraints={[400, 0]}
        >
            <div className="left-sidebar" style={{ width: isExpanded ? width : 32 }}>
                {
                    isExpanded
                        ? <div className='folder-panel'>
                            <div className='folder-panel-header'>
                                <h4 className='folder-panel-title'>用例列表</h4>
                                {/* @ts-ignore */}
                                <Button
                                    size="small"
                                    onClick={() => {
                                        setIsExpanded(isExpanded => !isExpanded)
                                    }}
                                    // @ts-ignore
                                    icon={<LeftOutlined />}
                                    title="收起"
                                    type='text'
                                    className='left-sidebar-toggle'
                                />
                            </div>
                            <FolderSidebar />
                        </div> :
                        <div style={{ textAlign: 'center', marginTop: 16 }}>
                            {/* @ts-ignore */}
                            <Button
                                size="small"
                                onClick={() => {
                                    setIsExpanded(isExpanded => !isExpanded)
                                }}
                                // @ts-ignore
                                icon={<FolderOpenOutlined />}
                                title="展开"
                                type='text'
                                className='left-sidebar-toggle'
                            />
                        </div>
                }
            </div>
        </LeftResizable>
    );
};

